<!DOCTYPE html>
<html>
    <head>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            alert("It loaded!");

            document.getElementById("my_div").addEventListener("mousedown", function() {
                alert("Mouse down!");
            });
            document.getElementById("my_div").addEventListener("mousemove", function() {
                alert("Mouse move!");
            });
        });
    </script>
    </head>
    <body>
        <div id="my_div">Hello there!</div>

        <div style="border: 1px solid black; width: 500px; height: 200px" id="divel">
            CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK
            ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
            CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME CLICK ME
        </div>
        <p id="result">This text should be green, whether you click on the div border or the div text.</p>
        <p>
            <script>
                const divel = document.getElementById("divel");
                const result = document.getElementById("result");
                divel.addEventListener("click", event => {
                    try {
                        const text = `Result: Clicked on divel element with id ${event.target.getAttribute(
                            "id"
                        )}`;
                        console.log(text);
                        result.innerText = text;
                        result.style.setProperty("color", "green");
                    } catch (e) {
                        const text = `Result: ${e.message}`;
                        console.error(text);
                        result.innerText = text;
                        result.style.setProperty("color", "red");
                    }
                });
            </script>
        </p>
    </body>
</html>
